<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 200px;
            display: block;
        }

        li {
            float: left;
            margin-left: 16px;
            list-style: none;
            height: 280px;
            margin-bottom: 16px;
            box-shadow: 0 0 3px 0 #666;
        }

        p {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bo {
            float: left;
        }

        .tar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-block;
        }

        .tar img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        let xhr = new XMLHttpRequest();
        xhr.open("get", "/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=头像&start=24&_=1594366274352");
        xhr.send();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
                let date = JSON.parse(xhr.responseText);
                let list = date.data.object_list;
                // console.log(date)
                let html = "";
                console.log(list)
                list.forEach((item, index) => {
                    html += `
                        <li>
                            <img src="${item.photo.path}">
                            <div class="bo">
                            <p>类型:${item.album.name}</p>
                            <p>标题:${item.msg}</p>
                            </div>
                            <img src="${item.sender.avatar}" class="tar">
                            </li>
                    `
                })
                document.querySelector(".box").innerHTML = html;

            }
        }
    </script>
</body>

</html>